<script setup>

// 路径导航
import {reactive, ref} from "vue";
import {PROJECT_INFO, RULE} from "../../../const/index.js";
import {ElMessage} from "element-plus";
import router from "../../../router/index.js";
import MyNav from "../../../components/MyNav.vue";
import MyForm from "../../../components/MyForm.vue";
import {updateApi} from "../../../api/axios.js";
import MyUpload from "../../../components/MyUpload.vue";

let assets=JSON.parse(sessionStorage.getItem('row'))
const navItems = [
  {icon: 'List', label: '资源管理', url: '/Assets'},
  {icon: 'OfficeBuilding', label: '资产列表', url: '/Assets'},
  {icon: 'Edit', label: '修改资产'},
];
// 表单项 + 表单值 + 表单规则
let items = ref([
  {label: '资产名称', prop: 'title'},
  {label: '资产单价', prop: 'price', type: 'number', span: 12},
  {label: '单价单位', prop: 'priceUnit', span: 12},
  {label: '总计库存', prop: 'total', type: 'number', span: 12},
  {label: '库存单位', prop: 'stockUnit', span: 12},
  {label: '资产描述', prop: 'info', type: 'card', tooltip: false}
]);
let params=reactive(assets);
let rules={title:RULE.TITLE,address:RULE.ADDRESS,info:RULE.INFO}

/* ================== 修改成功后 ================== */
function updateSuccess(){
  ElMessage.success('修改记录成功！');
  setTimeout(()=>router.push('/Assets'),1000);
}
</script>

<template>
  <my-nav :items="navItems"/>
  <el-card class="assets-update-card" header="修改资产信息">
    <my-form type="update"
             :items="items"
             :params="params"
             :rules="rules"
             :api="updateApi"
             :args="{module:'assets'}"
             :callback="updateSuccess"/>
  </el-card>
  <el-card class="update-avatar-card" header="上传资产文件">
    <my-upload :url="PROJECT_INFO.serverHost + '/api/v1/assets/uploadPicture/' + assets['id']" name="pictureFile" :callback="updateSuccess"
               :autoUpload="true"
               :show-file-list="false"/>
  </el-card>
</template>

<style scoped lang="scss">
.update-avatar-card{
  width: 60%;
  margin: 65px auto 0;
}

.assets-update-card {
  width: 60%; // 宽度
  margin: 65px auto 0; // 居中
}
</style>